<!-- 文本控件设置面板 -->
<template>
    <el-tabs modelValue="widget" stretch>
        <el-tab-pane :label="`${widget.widgetData.component.title}组件`" name="widget">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="文本内容" name="1">
                        <el-input
                            v-model="widget.widgetData.eles.content"
                            :autosize="{ minRows: 8 }"
                            clearable
                            type="textarea"
                            placeholder=""
                        >
                        </el-input>

                        <el-divider></el-divider>
                        <layout-pane label="显示行数">
                            <el-radio-group v-model="widget.widgetData.eles.customFeature.isWordWrap">
                                <el-radio :label="0">无限制</el-radio>
                                <el-radio :label="1">部分显示</el-radio>
                            </el-radio-group>
                        </layout-pane>
                        <template v-if="widget.widgetData.eles.customFeature.isWordWrap === 1">
                            <layout-pane label="行数限制">
                                <si-input-number
                                    v-model="widget.widgetData.eles.customFeature['word-wrap']"
                                    :min="0"
                                />
                            </layout-pane>
                        </template>
                    </el-collapse-item>
                </el-collapse>

                <!-- 组件名称 -->
                <row-component-name :widget="widget" />

                <el-collapse modelValue="1">
                    <el-collapse-item title="字体样式" name="1">
                        <!-- 文字样式 -->
                        <row-font-style :widget="widget" />

                        <!-- 文字阴影 -->
                        <el-divider></el-divider>
                        <row-shadow type="text-shadow" :widget="widget" />
                    </el-collapse-item>
                </el-collapse>
                
                <!-- 点击事件 -->
                <row-click-event :widget="widget" />
                
                <!-- 元素可见设置 -->
                <row-element-visible :widget="widget" />
            </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="组件样式" name="style">
            <el-scrollbar>
                <el-collapse modelValue="1">
                    <el-collapse-item title="组件设置" name="1">
                        <layout-pane label="大小">
                            <si-input-number
                                v-model="widget.widgetData.eles.style.width"
                                :min="0"
                                label="宽度"
                                unit="px"
                            />
                            <si-input-number
                                v-model="widget.widgetData.eles.style['line-height']"
                                :min="0"
                                label="行高"
                                unit="px"
                            />
                        </layout-pane>

                        <!-- 位置 -->
                        <el-divider></el-divider>
                        <row-position :widget="widget" />

                        <!-- 内边距 -->
                        <el-divider></el-divider>
                        <row-padding :widget="widget" />

                        <!-- 背景 -->
                        <el-divider></el-divider>
                        <row-background :widget="widget" />
                        
                        <!-- 边框 -->
                        <el-divider></el-divider>
                        <row-border :widget="widget" />
                        
                        <!-- 边框阴影 -->
                        <el-divider></el-divider>
                        <row-shadow type="box-shadow" :widget="widget" />
                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiInputNumber } from '@/components/setting-pane/setting-item'
import {
    RowFontStyle,
    RowShadow,
    RowPosition,
    RowBorder,
    RowPadding,
    RowBackground,
    RowClickEvent,
    RowComponentName,
    RowElementVisible
} from '../../widget-setting-row'
export default defineComponent({
    name: 'TextSetting',
    components: {
        LayoutPane,
        SiInputNumber,
        RowFontStyle,
        RowShadow,
        RowPosition,
        RowBorder,
        RowPadding,
        RowBackground,
        RowClickEvent,
        RowComponentName,
        RowElementVisible
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        return {
            widget
        }
    }
})
</script>
